<template>
	<view class="settings-box">
		<!-- 账号信息 -->
		<view class="settings-tip">账号信息</view>
		<view class="settings-item" @click="goToPage('/pages/settings/PersonInfo')">
			<text>个人资料</text>
			<uni-icons type="forward" size="14"></uni-icons>
		</view>
		<view class="settings-item" @click="goToPage('/pages/realname/realname')">
			<text>实名认证</text>
			<view>
				<!-- 是否认证 -->
				<view class="is-prove" :class="{'yes':isProve}">
					<uni-icons type="checkbox-filled" color="#FF7803" v-show="isProve"></uni-icons>
					<text>{{isProve?'已认证':'未认证'}}</text>
				</view>
				<uni-icons type="forward" size="14"></uni-icons>
			</view>
		</view>

		<!-- 通知 -->
		<view class="settings-tip">通知</view>
		<view class="settings-item">
			<text>音效</text>
			<!-- 音效开关 -->
			<u-switch size="46" space="2" v-model="switchSoundValue" activeColor="#FF7803"
				inactiveColor="rgb(230, 230, 230)">
			</u-switch>
		</view>
		<view class="settings-item">
			<text>动画</text>
			<!-- 动画开关 -->
			<u-switch size="46" space="2" v-model="switchAnimationValue" activeColor="#FF7803"
				inactiveColor="rgb(230, 230, 230)">
			</u-switch>
		</view>

		<!-- 关于 -->
		<view class="settings-tip">关于</view>
		<view class="settings-item">
			<text>用户协议</text>
			<uni-icons type="forward" size="14"></uni-icons>
		</view>
		<view class="settings-item">
			<text>隐私政策</text>
			<uni-icons type="forward" size="14"></uni-icons>
		</view>

		<!-- 退出登录 -->
		<view class="log-out">退出登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 是否认证
				isProve: false,
				// 音效开关
				switchSoundValue: false,
				// 动画开关
				switchAnimationValue: false
			}
		},
		methods: {
			goToPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.settings-box {
		width: 100vw;
		font-size: 28rpx;
		color: #333;

		.settings-tip {
			padding-left: 30rpx;
			line-height: 60rpx;
			color: #999;
		}

		.settings-item {
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			background-color: #fff;

			// 是否认证
			.is-prove {
				display: inline-block;
				color: #FF7803;
				margin-right: 10rpx;

				&.yes {
					width: 140rpx;
					height: 40rpx;
					border-radius: 20rpx;
					text-align: center;
					background: rgba(255, 120, 3, .1);
				}
			}
		}

		// 退出登录
		.log-out {
			width: 100%;
			margin-top: 20rpx;
			text-align: center;
			line-height: 104rpx;
			color: #FF7803;
			background-color: #fff;
		}
	}
</style>
